<template>
  <div class="app-container">
    <table class="view-style">
      <view class="table-tr flex">
        <view class="title">设施名称</view>
        <view>{{ form.facilityName }}</view>
      </view>
      <view class="table-tr flex">
        <view class="title">隐患编号</view>
        <view>{{ form.caseCode }}</view>
      </view>
      <view class="table-tr flex">
        <view class="title">巡查组别</view>
        <view>{{ form.reportName }}</view>
      </view>
      <view class="table-tr flex">
        <view class="title">巡查时间</view>
        <view>{{ parseTime(form.createTime) }}</view>
      </view>
      <view class="table-tr flex">
        <view class="title">病害部置</view>
        <view>{{ form.diseaseLocationName }}</view>
      </view>
      <view class="table-tr flex">
        <view class="title">病害等级</view>
        <view><dict-tag type="broken_level_type" :value="form.brokenLevel" /></view>
      </view>
      <view class="table-tr flex">
        <view class="title">病害描述</view>
        <view>
          {{ form.diseaseLocationName }}-{{ form.brokenCommpontName }}-{{
            form.brokenTypeName
          }}-{{ form.area >= 0 ? form.area : 0 }}m²
          <div>{{ form.brokenDesc || '' }}</div>
        </view>
      </view>
      <view class="table-tr flex">
        <view class="title">处置建议</view>
        <view><dict-tag type="deal_type" :value="form.dealMsg" /></view>
      </view>
      <view class="table-tr flex">
        <view class="title flex align-center justify-around"
          ><view style="width: 1em" class="vertical"
            >病 害 现 场 照 片 （全景）</view
          ></view
        >
        <view>
          <div class="img-wrap">
            <image
              mode="widthFix"
              @tap="preview(item.url, [item.url])"
              :src="item.url"
              v-for="(item, index) in form.brokenImg"
              v-if="index < 1"
              alt=""
              style="cursor: pointer"
            />
          </div>
        </view>
      </view>
      <view class="table-tr flex">
        <view class="title flex align-center justify-around"
          ><view class="vertical" style="width: 1em"
            >病 害 现 场 照 片 (特写）</view
          ></view
        >
        <view>
          <div class="img-wrap">
            <image
              mode="widthFix"
              @tap="
                preview(
                  item.url,
                  form.brokenImg
                    .filter((item, index) => index >= 1)
                    .map((item) => item.url)
                )
              "
              :src="item.url"
              v-for="(item, index) in form.brokenImg"
              v-if="index >= 1"
              alt=""
              style="cursor: pointer"
            />
          </div>
        </view>
      </view>
      <view class="table-tr flex">
        <view class="title flex align-center justify-around"
          ><view class="vertical" style="width: 1em">病 害 位 置</view></view
        >
        <view>
          <div><text class="text-bold">经度:</text>{{ form.lng }}</div>
          <div><text class="text-bold">纬度:</text>{{ form.lat }}</div>
          <div>{{ form.location }}</div>
          <image
            @tap="
              preview(0, [
                `https://restapi.amap.com/v3/staticmap?location=${form.lng},${form.lat}&zoom=18&size=600*600&markers=mid,,A:${form.lng},${form.lat}&key=dcd4687a4d694e52f00e01e9a92652f2`
              ])
            "
            mode="widthFix"
            :src="`https://restapi.amap.com/v3/staticmap?location=${form.lng},${form.lat}&zoom=18&size=600*600&markers=mid,,A:${form.lng},${form.lat}&key=dcd4687a4d694e52f00e01e9a92652f2`"
            style="cursor: pointer; width: 100%"
          />
        </view>
      </view>
      <view class="table-tr flex">
        <view class="title flex align-center justify-around"
          ><view style="width: 1em" class="vertical">备 注</view></view
        >
        <view>{{ form.textarea }}</view>
      </view>
    </table>
  </div>
</template>
<script>
import { DICT_TYPE, getDictDatas } from '@/utils/dict';
import { parseTime } from '@/utils/ruoyi.js';
import DictTag from '@/components/DictTag';
export default {
  name: 'caseDetail',
  props: {
    form: {
      type: Object,
      default: () => ({
        brokenImg: []
      })
    }
  },
  components: { DictTag },
  data() {
    return {};
  },
  created() {},
  methods: {
    parseTime,
    preview(index, photoList) {
      uni.previewImage({
        current: index,
        urls: photoList
      });
    }
  }
};
</script>

<style lang="scss">
.my-process-designer {
  height: calc(100vh - 200px);
}

.box-card {
  width: 100%;
  margin-bottom: 20px;
}

.app-container .el-input.is-disabled .el-input__inner {
  background-color: transparent;
  border-color: transparent;
  color: #000;
  cursor: default;
}

.view-style {
  width: 600upx;
  margin: 30upx auto;
  font-size: 2.8rem;
  /*边框重叠，边框合并*/
  border-top: 1px solid #ccc;
  .table-tr {
    border-bottom: 1px solid #ccc;
  }
  .title {
    width: 25%;
    flex: none;
  }
  > view {
    > view {
      flex: 1;
      padding: 10px;
      border-left: 1px solid #ccc;
      &:last-child {
        border-right: 1px solid #ccc;
      }
    }
  }

  view > view.vertical {
    writing-mode: vertical-rl;
    text-align: left;
  }

  /*上边框线*/
  view > view.title {
    width: 6em;
    /*宽度*/
    text-align: left;
    /*左对齐*/
    padding-left: 10px;
    font-weight: bold;
    /*下边框线*/
  }

  view > view.title + view {
    font-weight: normal;
    word-break: break-all;
  }
}

.img-wrap {
  display: flex;
  flex-wrap: wrap;

  image {
    width: 98%;
    margin-right: 5px;
    margin-bottom: 5px;
  }
}
</style>
